<template>
  <div>

    <div class="container">
      <div ref="eeee" class="card_div">
        <van-image width="60%" style="margin-left: 20%;margin-bottom: 20px;margin-top: 10px;" src="/images/logo.svg" />
        <van-form @submit="onSubmit" validate-first @failed="onFailed">
          <van-icon name="/images/mob-icon-user.svg"  style="position: relative;top:32px;left:10px;z-index: 10000;"/>
          <van-icon name="/images/mob-icon-lock.svg"  style="position: relative;top:102px;left:-5px;z-index: 10000;"/>
          <van-field
              v-model="model.id"
              name=""
              label=""
              placeholder="请输入用户名称"
              :rules="[{ required: true, message: '' }]"
              @field-label-color="'red'"
              style="height: 42px;font-size: 16px;color: #999999;background-color: #EEF2FB;padding-left: 32px; box-shadow: 0px 0px 2px rgba(0,37,57,0.2);"
          />
          <van-field
              v-model="model.pwd"
              type="password"
              name=""
              label=""
              placeholder="请输入用户密码"
              :rules="[{ required: true, message: '' }]"
              style="height: 42px;font-size: 16px;color: #999999;background-color: #EEF2FB;padding-left: 32px;margin-top: 28px; box-shadow: 0px 0px 2px rgba(0,37,57,0.2);"
          />
          <template v-if="model.msg!=''">
            <span style="color:red;line-height:30px;padding-left:5px;">{{ model.msg }}</span>
          </template>
          <div style="margin-left: 0px;margin-right: 0px;margin-top: 40px;">
            <van-button block type="info" native-type="submit" size="normal"
                        style="height: 42px;font-size: 18px;color: #ffffff;">登录</van-button>
          </div>
          <div style="margin-top: 20px;color: #06afea;font-size: 16px;">手机号免费体验用户，请使用<span style="color: #F56C6C;">电脑端浏览器</span>访问www.snbg365.com，免费体验全部功能。</div>
        </van-form>
      </div>
    </div>

    <van-popup v-model="editPassShow" position="bottom" :style="{height:'100%'}" closeable>
      <van-form @submit="editPass" validate-first @failed="onFailed">
        <van-field v-model="editModel.oldPass" type="password" name="当前密码" label="当前密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <van-field v-model="editModel.newPass" type="password" name="新密码" label="新密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <van-field v-model="editModel.newPass_2" type="password" name="重复新密码" label="重复新密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <div style="margin:10px;color:#666;background:#FAFFBF;padding:10px;line-height:25px;">
          温馨提示：<br />
          1.密码设置要求长度不应小于8位，且须包含英文大写字母、小写字母、数字和特殊符号。<br />
        </div>
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit">确定</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      model: {id: '', pwd: '', msg: ''},

      editPassShow:false,
      editModel:{ newPass: null, newPass_2: null, oldPass: null, id: null },
    }
  },
  mounted() {
    let that = this;
    let t1 = window.setTimeout(function() {
      that.$forceUpdate();
      that.$refs.eeee.click();
      console.log('3秒钟之后执行了');
    },3000)
  },
  methods: {
    onFailed(errorInfo) {
      //console.log('failed', errorInfo);
    },
    async onSubmit() {
      this.loading = true;

      let res = await elm.post("/system/login/AuthLogin", {
        id: this.model.id,
        pwd: this.model.pwd,
        url: elm.query("url")
      });
      console.log('登录：', res);
      if (res.success == true) {
        elm.info.token = res.token;
        if (res.authpage == "pass_eidt") {
          this.loading = false;
          this.$toast.fail("您的密码强度不够，请修改密码后重新登录！");
          this.showEditPass();
          return;
        }
        elm.info.system = res.system;
        elm.info.menu = res.menu;
        elm.info.user = res.user;
        elm.info.org = res.org;
        elm.info.role = res.role;
        location.href = elm.settings.routefix + elm.info.system.path;
        //记录日志
        let oper_log = {};
        oper_log.oper_type = "1"; //手机
        oper_log.user_name = this.model.id;
        oper_log.nick_name = res.user.name;
        oper_log.menu_title = "/system/login/AuthLogin";
        oper_log.oper_time = new Date().toLocaleString();
        oper_log.msg = "登录";
        await elm.post('/system/login/log/Upsert', oper_log);
      } else if (res.success == false || res.status == 401) {
        this.model.msg = "用户名或密码错误。";
      } else {
        this.model.msg = "登录失败，请稍后重试。";
      }
      this.loading = false;
    },

    showEditPass(){
      this.editModel = { newPass: null, newPass_2: null, oldPass: null, id: this.model.id };
      this.editPassShow = true;
    },
    async editPass() {
      if (this.editModel.oldPass == this.editModel.newPass) {
        this.$toast.fail('您填写的新旧密码内容相同。');
        return;
      }
      if (this.editModel.newPass != this.editModel.newPass_2) {
        this.$toast.fail('两次填写的新密码不一致。');
        return;
      }
      if(!this.validatePassword(this.editModel.newPass))
      {
        this.$toast.fail("新密码强度不够，请按照提示要求设定新密码。");
        return;
      }
      let res = await elm.post('/system/login/EditPassword', this.editModel);
      if (res.status != 'success') {
        this.$message.error("新密码强度不够，请按照提示要求设定新密码。");
        return;
      }
      else {
        this.$toast.success('密码修改成功。');
        this.editPassShow = false;
      }
    },
    validatePassword(password) {
      const lengthRequirement = password.length >= 8;
      const upperCaseRequirement = /[A-Z]/.test(password);
      const lowerCaseRequirement = /[a-z]/.test(password);
      const numberRequirement = /[0-9]/.test(password);
      const specialCharRequirement = /[!@#$%^&*(),.?":{}|<>]/.test(password);
      return lengthRequirement && upperCaseRequirement && lowerCaseRequirement && numberRequirement && specialCharRequirement;
    }
  }
};
</script>
<style>

</style>

<style scoped>
.container{
  padding-left: 8%;
  padding-right: 8%;
  padding-top: 25%;
  /*border:1px red solid;*/
}
.card_div{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 90px;
  height: 320px;
  /*border:1px red solid;*/

  /*border-radius: 3px;*/
  /*box-shadow: 0px 0px 10px rgba(0,0,0,0.3);*/
  /*background-color: #F7FAFE;*/
  /*opacity: 0.9;*/

}
</style>